// 首页



.com-section-pt {
  padding: px2rem(70px) 0 0;
}

.com-section-cap {
  height: px2rem(156px);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: auto 100%;
  position: absolute;
  left: 50%;
  top: 0;
  width: 100%;
  transform: translate(-50%, 0);

  &.cap-jpyl {
    background-image: url("../images/cap_1.png");
  }

  &.cap-bbyxb {
    background-image: url("../images/cap_2.png");
  }

  &.cap-hyb {
    background-image: url("../images/cap_3.png");
  }
}

.com-section-wrapper {
  width: px2rem(613px);
  margin: 0 auto;
  padding: px2rem(30px) 0 0;
  background: url("../images/sec_top_1.png") no-repeat top center;
  background-size: 100% auto;
}

.com-section-inner {
  width: 100%;
  padding: 0 0 px2rem(30px) 0;
  background: url("../images/sec_bottom_1.png") no-repeat bottom center;
  background-size: 100% auto;
}

.com-section-content {
  background: url("../images/sec_mid_1.png") repeat-y top center;
  background-size: 100% auto;
}

.container-index {
  padding: px2rem(50px) 0 px2rem(60px);
  background-color: #7eb8b3;
  background-image: url("../images/top_bg_2.png");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  min-height: 100%;

  .prize-caption{
    height: px2rem(40px);
    display: flex;
    justify-content: center;
    align-items: center;
    border:px2rem(3px) solid #f8d499;
    border-radius: px2rem(20px);
    font-size: px2rem(28px);
    background: #2c867b;
    padding:0 px2rem(20px);
    color: #fff;
  }

  .rule-entry{
    width: px2rem(99px);
    height: px2rem(28px);
    background: url("../images/18.png") no-repeat top center;
    background-size: 100%;
  }

  .mod-count{
    .line{
      height: 1px;
      background: #16463c;
    }
    .total-count{
      height: px2rem(42px);
      border-radius: px2rem(20px);
      border:2px solid #f8d397;
      background: #2c867b;
      flex:1;
      color: #ffffff;
      font-size: px2rem(30px);
      text-align: center;
      margin: 0 px2rem(20px);
      letter-spacing:px2rem(10);
    }
  }

  .header-logo{
    width: px2rem(185px);
    height: px2rem(75px);
    background: url("../images/logo_1.png") no-repeat top center;
    background-size: 100% 100%;
    margin: 0 0 0 px2rem(35px);
  }

  .vocie-popup{
    padding:px2rem(50px) 0;
    border-radius: px2rem(20px) px2rem(20px) 0 0;
    li{
      display: flex;
      justify-content: center;
      align-items: center;
      padding: px2rem(20px) 0;
      font-size: px2rem(32px);
      &.active{
        color: #0d4741;
        font-weight: bold;
      }
    }
  }

  .header-banner-txt {
    width: px2rem(494px);
    height: px2rem(248px);
    background: url("../images/1.png") no-repeat top center;
    background-size: 100% 100%;
    margin-top: px2rem(40px);
  }

  .header-notice {
    padding: 0 px2rem(20px);
    width: px2rem(490px);
    height: px2rem(45px);
    background-color: rgba(#fff, $alpha: 0.8);
    border-radius: px2rem(10px);
    margin: px2rem(20px) auto 0;

    .pic-icon {
      width: px2rem(29px);
      height: px2rem(26px);
      background: url("../images/7.png") no-repeat top center;
      background-size: 100% 100%;
    }

    .notice-list {
      height: 100%;
      overflow: hidden;
      color: #d3a063;
      font-size: px2rem(24px);

      .swiper-slide {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        line-height: px2rem(45px);
      }
    }
  }

  .btn-startbb {
    margin: 0 auto;
    width: px2rem(464px);
    height: px2rem(100px);
    overflow: hidden;
    background: url("../images/btn_1.png") no-repeat top center;
    background-size: 100% 100%;
  }

  .sec-voice {
    width: px2rem(180px);
    height: px2rem(60px);
    border: 1px solid #fff;
    border-radius: px2rem(30px);
    margin: 0 auto;

    .voice-icon {
      width: px2rem(32px);
      height: px2rem(32px);
      border-radius: 50%;
      background: url("../images/9.png") no-repeat top center;
      background-size: 100%;
    }

    .arrow {
      width: px2rem(16px);
      height: px2rem(9px);
      background: url("../images/arrow_1.png") no-repeat top center;
      background-size: 100%;
    }
  }

  .remain-count {
    .icon-tip {
      width: px2rem(30px);
      height: px2rem(30px);
      background: url("../images/10.png") no-repeat top center;
      background-size: 100%;
    }
  }


  .prize-list {
    padding: px2rem(15px) 0 px2rem(70px);
    margin:  0 px2rem(20px);

    .swiper-pagination-bullet{
      background: #a1b2af !important;
    }
    .swiper-pagination-bullet-active{
      background: #2c867b !important;
    }

    .item-cell {
      width: px2rem(145px);
      margin: px2rem(30px) px2rem(22px) 0;

      .pic {
        height: px2rem(145px);
        width: 100%;
        overflow: hidden;
        border-radius: px2rem(24px);
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          max-width: 100%;
          max-height: 100%;
        }
      }

      .tit {
        color: #4c4c4c;
        font-size: px2rem(20px);
        text-align: center;
        margin: px2rem(10px) 0 0;
      }
    }
  }

  .integral-box {
    background: url("../images/btn_2.png") no-repeat top center;
    background-size: 100% 100%;
    margin: px2rem(20px) auto 0;
    width: px2rem(512px);
    height: px2rem(76px);

    .pic-icon {
      width: px2rem(25px);
      height: px2rem(25px);
      background: url("../images/6.png") no-repeat top center;
      background-size: 100% 100%;
    }

    .goto-exchange {
      height: 100%;
      width: px2rem(200px);
      text-indent: -9999999px;
    }
  }

  .invite-pk-entry {
    width: px2rem(653px);
    height: px2rem(266px);
    background: url("../images/invite_pk.png") no-repeat top center;
    background-size: 100%;
    margin: px2rem(40px) auto 0;
  }

  .bocake-times {
    padding: 0 px2rem(30px);

    .cap {
      height: px2rem(30px);
      background: url("../images/txt_1.png") no-repeat top center;
      background-size: 100%;
    }

    .times {
      border: px2rem(3px) solid #f9d69c;
      border-radius: px2rem(30px);
      background: #2c867b;
      height: px2rem(50px);
      letter-spacing: px2rem(5px);
    }
  }

  .ranklist-tbody {
    li {
      padding: px2rem(10px) 0;

      &:nth-child(1) {
        .num {
          text-indent: -999999px;
          background: url("../images/rank_1.png") no-repeat top center;
          background-size: 100%;
        }
      }

      &:nth-child(2) {
        .num {
          text-indent: -999999px;
          background: url("../images/rank_2.png") no-repeat top center;
          background-size: 100%;
        }
      }

      &:nth-child(3) {
        .num {
          text-indent: -999999px;
          background: url("../images/rank_3.png") no-repeat top center;
          background-size: 100%;
        }
      }
    }

    .num {
      min-width: px2rem(32px);
      min-height: px2rem(43px);
      display: flex;
      font-weight: bold;
      justify-content: center;
      align-items: center;
    }
  }

  .section-hyb {
    .com-section-inner {
      padding-bottom: 0;

    }

    .avatar {
      border: px2rem(4px) solid #d3a063;
      border-radius: 50%;
      background: #4f4f4f;
      width: px2rem(112px);
      height: px2rem(112px);
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .item-info {
      min-width: px2rem(150px);

      &:nth-child(1) {
        border-right: 1px solid #4f4f4f;
      }
    }

    .pro-list {
      padding: px2rem(50px) px2rem(30px) px2rem(24px);
      background: #519b92;
      background-size: 100% auto;
      border-radius: px2rem(20px) px2rem(20px) 0 0;

      li {
        padding: px2rem(30px);
        background: #fff;
        border: 1px solid #d3a063;
        border-radius: px2rem(20px);
        overflow: hidden;
        margin: 0 0 px2rem(30px) 0;

        .num {
          min-width: px2rem(75px);
          padding: px2rem(5px) px2rem(10px);
          margin: 0 px2rem(16px) 0 0;
          border: 1px solid #16463c;
          border-radius: px2rem(6px);
        }

        .pic {
          width: px2rem(215px);
          height: px2rem(120px);
          overflow: hidden;
          background: #f5f5f5;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;

          img {
            max-width: 100%;
            max-height: 100%;
          }
        }
      }
    }
  }

  .sec-ysz-container {
    padding: 0 0 px2rem(40px) 0;

    .bg-pic1 {
      position: absolute;
      right: 0;
      bottom: 0;
      width: px2rem(407px);
      height: px2rem(355px);
      background: url("../images/w_bg_1.png") no-repeat top center;
      background-size: 100%;
    }

    .ysz-wan {
      margin: 0 auto;
      width: px2rem(458px);
      height: px2rem(505px);
      overflow: hidden;
      background: url("../images/wan.png") no-repeat top center;
      background-size: 100%;
    }

    .side-entry {
      z-index: 10;
      position: absolute;
      right: 0;
      top: px2rem(80px);
      display: flex;
      flex-direction: column;
      align-items: flex-end;

      li {
        margin: 0 0 px2rem(35px) 0;

        &:nth-child(1) {
          width: px2rem(116px);
          height: px2rem(90px);
          background: url("../images/2.png") no-repeat top center;
          background-size: 100%;
        }

        &:nth-child(2) {
          width: px2rem(95px);
          height: px2rem(77px);
          background: url("../images/3.png") no-repeat top center;
          background-size: 100%;
        }

        &:nth-child(3) {
          width: px2rem(95px);
          height: px2rem(77px);
          background: url("../images/4.png") no-repeat top center;
          background-size: 100%;
        }
        &:nth-child(4) {
          width: px2rem(95px);
          height: px2rem(77px);
          background: url("../images/17.png") no-repeat top center;
          background-size: 100%;
        }
      }
    }
  }

  .dice-box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: px2rem(400px);
    height: px2rem(400px);
    border-radius: 50%;

    // background: #f60;
    .loading {
      width: px2rem(80px);
      height: px2rem(80px);
      background: url("../images/loading.gif") no-repeat top center;
      background-size: 100% 100%;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }

    .dice {
      position: absolute;
      width: px2rem(70px);
      height: px2rem(76px);
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
      }

      &.dice1 {
        // top:150px;
        top: 40.4%;
        left: 44.2%;

        &.active {
          animation: r1ac 1s linear;
          -moz-animation: r1ac 1s linear;
          -webkit-animation: r1ac 1s linear;
        }
      }

      &.dice2 {

        // top:200px;
        top: 56%;
        left: 60.5%;

        &.active {
          animation: r2ac 1s linear;
          -moz-animation: r2ac 1s linear;
          -webkit-animation: r2ac 1s linear;
        }
      }

      &.dice3 {

        top: 205px;
        top: 57.5%; // left:138px;
        left: 37%;

        &.active {
          animation: r3ac 1s linear;
          -moz-animation: r3ac 1s linear;
          -webkit-animation: r3ac 1s linear;
        }
      }

      &.dice4 {

        top: 135px;
        top: 35.8%; // left:235px;
        left: 63%;

        &.active {
          animation: r4ac 1s linear;
          -moz-animation: r4ac 1s linear;
          -webkit-animation: r4ac 1s linear;
        }
      }

      &.dice5 {

        top: 110px;
        top: 28.1%; // left:120px;
        left: 32.2%;

        &.active {
          animation: r5ac 1s linear;
          -moz-animation: r5ac 1s linear;
          -webkit-animation: r5ac 1s linear;
        }
      }

      &.dice6 {

        top: 155px;
        top: 48%; // left:80px;
        left: 21.4%;

        &.active {
          animation: r6ac 1s linear;
          -moz-animation: r6ac 1s linear;
          -webkit-animation: r6ac 1s linear;
        }
      }
    }
  }
  .popup-task{
    background: transparent !important;
    padding-top: px2rem(80px);
    max-height: 80%;
    min-height: 40%;
    overflow: hidden;
    .caption{
      width: px2rem(465px);
      height: px2rem(176px);
      background: url("../images/task_1.png") no-repeat top center;
      background-size: 100%;
      margin: 0 auto;
      position: absolute;
      left:50%;
      top: 0;
      transform: translate(-50%,0);
    }
  }
  .task-wrapper{
    padding: px2rem(45px) 0 0;
    background: url("../images/bg_top_type1.png") no-repeat top center;
    background-size: 100% auto;
  }
  .task-inner{
    background: url("../images/bg_middle_type1.png") repeat-y top center;
    background-size: 100% auto;
  }
  .task-list{
    padding: 0 0 px2rem(50px) 0;
    li{
      width: px2rem(709px);
      height: px2rem(136px);
      background: url("../images/bg_2.png") no-repeat top center;
      background-size: 100% 100%;
      margin: px2rem(40px) auto 0;
      padding: 0 px2rem(35px);
      .icon-pic{
        width: px2rem(70px);
        height: px2rem(70px);
        background-repeat: no-repeat;
        background-size: 100%;
        background-image: url("../images/task_3.png");
        &.pic-wx{
          background-image: url("../images/task_2.png");
        }
      }
      .handler-btn{
        min-width: px2rem(100px);
        height: px2rem(40px);
        line-height: px2rem(40px);
        border-radius: px2rem(10px);
        font-size: px2rem(20px);
        color: #fde0b2;
        text-align: center;
        background-image: linear-gradient(to bottom,#43a298,#3a8d81)
      }
    }
  }
  .popup-digital{
    background: transparent;
    
    .digital-wrapper{
      width:px2rem(750px);
      height: px2rem(655px);
      background: url("../images/11.png") no-repeat top center;
      background-size: 100%;
      padding: px2rem(320px) 0 0;
    }
    .handler-btn{
      width: px2rem(393px);
      height: px2rem(102px);
      padding: px2rem(18px) 0 0;
      font-size: px2rem(40px);
      margin: px2rem(35px) auto 0;
      background: url("../images/12.png") no-repeat top center;
      background-size: 100%;
    }
    .handler-close{
      position: absolute;
      right: px2rem(100px);
      top: px2rem(200px);
      width: px2rem(44px);
      height: px2rem(44px);
      background: url("../images/close_1.png") no-repeat top center;
      background-size: 100%;
    }
  }
}

//

@keyframes r1ac {
  0% {
    top: 14%;
    left: 20%;
    transform: rotate(0deg);
  }

  10% {
    top: 40%;
    left: 20%;
    transform: rotate(0deg);
  }

  25% {
    top: 20%;
    left: 40%;
    transform: rotate(180deg);
  }

  40% {
    top: 26%;
    left: 50%;
    transform: rotate(360deg);
  }

  60% {
    top: 40%;
    left: 55%;
    transform: rotate(720deg);
  }

  80% {
    top: 57%;
    left: 40%;
    transform: rotate(1080deg);
  }

  100% {
    top: 51%;
    left: 30%;
    transform: rotate(1440deg);
  }
}

@-webkit-keyframes r1ac {
  0% {
    top: 14%;
    left: 20%;
    -webkit-transform: rotate(0deg);
  }

  10% {
    top: 40%;
    left: 20%;
    -webkit-transform: rotate(0deg);
  }

  25% {
    top: 20%;
    left: 40%;
    -webkit-transform: rotate(180deg);
  }

  40% {
    top: 26%;
    left: 50%;
    -webkit-transform: rotate(360deg);
  }

  60% {
    top: 40%;
    left: 55%;
    -webkit-transform: rotate(720deg);
  }

  80% {
    top: 57%;
    left: 40%;
    -webkit-transform: rotate(1080deg);
  }

  100% {
    top: 51%;
    left: 30%;
    -webkit-transform: rotate(1440deg);
  }
}

@keyframes r2ac {
  0% {
    top: 14%;
    left: 35%;
    transform: rotate(0deg);
  }

  10% {
    top: 40%;
    left: 35%;
    transform: rotate(0deg);
  }

  25% {
    top: 45%;
    left: 20%;
    transform: rotate(180deg);
  }

  40% {
    top: 51%;
    left: 40%;
    transform: rotate(360deg);
  }

  60% {
    top: 45%;
    left: 55%;
    transform: rotate(720deg);
  }

  80% {
    top: 40%;
    left: 40%;
    transform: rotate(1080deg);
  }

  100% {
    top: 45%;
    left: 55%;
    transform: rotate(1440deg);
  }
}

@-webkit-keyframes r2ac {
  0% {
    top: 14%;
    left: 35%;
    -webkit-transform: rotate(0deg);
  }

  10% {
    top: 40%;
    left: 35%;
    -webkit-transform: rotate(0deg);
  }

  25% {
    top: 45%;
    left: 20%;
    -webkit-transform: rotate(180deg);
  }

  40% {
    top: 51%;
    left: 40%;
    -webkit-transform: rotate(360deg);
  }

  60% {
    top: 45%;
    left: 55%;
    -webkit-transform: rotate(720deg);
  }

  80% {
    top: 40%;
    left: 40%;
    -webkit-transform: rotate(1080deg);
  }

  100% {
    top: 45%;
    left: 55%;
    -webkit-transform: rotate(1440deg);
  }
}

@keyframes r3ac {
  0% {
    top: 14%;
    left: 50%;
    transform: rotate(0deg);
  }

  10% {
    top: 40%;
    left: 50%;
    transform: rotate(0deg);
  }

  25% {
    top: 45%;
    left: 20%;
    transform: rotate(180deg);
  }

  40% {
    top: 28%;
    left: 40%;
    transform: rotate(360deg);
  }

  60% {
    top: 37%;
    left: 55%;
    transform: rotate(720deg);
  }

  80% {
    top: 45%;
    left: 40%;
    transform: rotate(1080deg);
  }

  100% {
    top: 54%;
    left: 45%;
    transform: rotate(1440deg);
  }
}

@-webkit-keyframes r3ac {
  0% {
    top: 14%;
    left: 50%;
    -webkit-transform: rotate(0deg);
  }

  10% {
    top: 40%;
    left: 50%;
    -webkit-transform: rotate(0deg);
  }

  25% {
    top: 45%;
    left: 20%;
    -webkit-transform: rotate(180deg);
  }

  40% {
    top: 28%;
    left: 40%;
    -webkit-transform: rotate(360deg);
  }

  60% {
    top: 37%;
    left: 55%;
    -webkit-transform: rotate(720deg);
  }

  80% {
    top: 45%;
    left: 40%;
    -webkit-transform: rotate(1080deg);
  }

  100% {
    top: 54%;
    left: 45%;
    -webkit-transform: rotate(1440deg);
  }
}

@keyframes r4ac {
  0% {
    top: 28%;
    left: 20%;
    transform: rotate(0deg);
  }

  10% {
    top: 52%;
    left: 20%;
    transform: rotate(0deg);
  }

  25% {
    top: 34%;
    left: 40%;
    transform: rotate(180deg);
  }

  40% {
    top: 43%;
    left: 50%;
    transform: rotate(360deg);
  }

  60% {
    top: 54%;
    left: 35%;
    transform: rotate(720deg);
  }

  80% {
    top: 45%;
    left: 20%;
    transform: rotate(1080deg);
  }

  100% {
    top: 41%;
    left: 40%;
    transform: rotate(1440deg);
  }
}

@-webkit-keyframes r4ac {
  0% {
    top: 28%;
    left: 20%;
    -webkit-transform: rotate(0deg);
  }

  10% {
    top: 52%;
    left: 20%;
    -webkit-transform: rotate(0deg);
  }

  25% {
    top: 34%;
    left: 40%;
    -webkit-transform: rotate(180deg);
  }

  40% {
    top: 43%;
    left: 50%;
    -webkit-transform: rotate(360deg);
  }

  60% {
    top: 54%;
    left: 35%;
    -webkit-transform: rotate(720deg);
  }

  80% {
    top: 45%;
    left: 20%;
    -webkit-transform: rotate(1080deg);
  }

  100% {
    top: 41%;
    left: 40%;
    -webkit-transform: rotate(1440deg);
  }
}

@keyframes r5ac {
  0% {
    top: 28%;
    left: 35%;
    transform: rotate(0deg);
  }

  10% {
    top: 52%;
    left: 35%;
    transform: rotate(0deg);
  }

  25% {
    top: 54%;
    left: 50%;
    transform: rotate(180deg);
  }

  40% {
    top: 34%;
    left: 40%;
    transform: rotate(360deg);
  }

  60% {
    top: 45%;
    left: 35%;
    transform: rotate(720deg);
  }

  80% {
    top: 55%;
    left: 50%;
    transform: rotate(1080deg);
  }

  100% {
    top: 58%;
    left: 60%;
    transform: rotate(1440deg);
  }
}

@-webkit-keyframes r5ac {
  0% {
    top: 28%;
    left: 35%;
    -webkit-transform: rotate(0deg);
  }

  10% {
    top: 52%;
    left: 35%;
    -webkit-transform: rotate(0deg);
  }

  25% {
    top: 54%;
    left: 50%;
    -webkit-transform: rotate(180deg);
  }

  40% {
    top: 34%;
    left: 40%;
    -webkit-transform: rotate(360deg);
  }

  60% {
    top: 45%;
    left: 35%;
    -webkit-transform: rotate(720deg);
  }

  80% {
    top: 55%;
    left: 50%;
    -webkit-transform: rotate(1080deg);
  }

  100% {
    top: 58%;
    left: 60%;
    -webkit-transform: rotate(1440deg);
  }
}

@keyframes r6ac {
  0% {
    top: 28%;
    left: 50%;
    transform: rotate(0deg);
  }

  10% {
    top: 52%;
    left: 50%;
    transform: rotate(0deg);
  }

  25% {
    top: 40%;
    left: 60%;
    transform: rotate(180deg);
  }

  40% {
    top: 43%;
    left: 30%;
    transform: rotate(360deg);
  }

  60% {
    top: 57%;
    left: 55%;
    transform: rotate(720deg);
  }

  80% {
    top: 55%;
    left: 30%;
    transform: rotate(1080deg);
  }

  100% {
    top: 62%;
    left: 35%;
    transform: rotate(1440deg);
  }
}

@-webkit-keyframes r6ac {
  0% {
    top: 28%;
    left: 50%;
    -webkit-transform: rotate(0deg);
  }

  10% {
    top: 52%;
    left: 50%;
    -webkit-transform: rotate(0deg);
  }

  25% {
    top: 40%;
    left: 60%;
    -webkit-transform: rotate(180deg);
  }

  40% {
    top: 43%;
    left: 30%;
    -webkit-transform: rotate(360deg);
  }

  60% {
    top: 57%;
    left: 55%;
    -webkit-transform: rotate(720deg);
  }

  80% {
    top: 55%;
    left: 30%;
    -webkit-transform: rotate(1080deg);
  }

  100% {
    top: 62%;
    left: 35%;
    -webkit-transform: rotate(1440deg);
  }
}

.popup-ysz-result{
  background: transparent !important;
  padding: 0 px2rem(100px);
  .close-pic{
    width:px2rem(62px);
    height: px2rem(62px);
    background: url("../images/close_2.png") no-repeat top center;
    background-size: 100%;
  }
  .wan{
    width: px2rem(230px);
    height: px2rem(250px);
    background: url("../images/5.png") no-repeat top center;
    background-size: 100%;
    position: absolute;
    left:50%;
    bottom: px2rem(50px);
    transform: translate(-50%,0);
  }
  .soma-body{
    width: px2rem(433px);
    height: px2rem(556px);
    background: url("../images/19.png") no-repeat top center;
    background-size:100% auto;
    color: #1a83ab;
    font-size: px2rem(36px);
    padding: px2rem(50px) 0 0;
  }
  .soma-mid{
    padding: 0 px2rem(80px) px2rem(15px);
    position: relative;
  }
  .handle-btn{
    width:px2rem(236px);
    height: px2rem(95px);
    background: url("../images/20.png") no-repeat top center;
    background-size: 100%;
    margin: 0 px2rem(10px);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #682e16;
    font-size: px2rem(40px);
    font-weight: bold;
  }
  .pic-1{
    position: absolute;
    right: 0;
    bottom: 0;
    width: px2rem(270px);
    height: px2rem(430px);
    background: url("../images/21.png") no-repeat top center;
    background-size: 100%;
  }
}


.result-dice-box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: px2rem(180px);
  height: px2rem(180px);
  border-radius: 50%;

  background: #f60;
  
  .dice {
    position: absolute;
    width: px2rem(40px);
    height: px2rem(40px);
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
    }

    &.dice1 {
      // top:150px;
      top: 69%;
      left: 47%;

      &.active {
        animation: r1ac 1s linear;
        -moz-animation: r1ac 1s linear;
        -webkit-animation: r1ac 1s linear;
      }
    }

    &.dice2 {

      // top:200px;
      top: 49%;
      left: 72%;

      &.active {
        animation: r2ac 1s linear;
        -moz-animation: r2ac 1s linear;
        -webkit-animation: r2ac 1s linear;
      }
    }

    &.dice3 {

     
      top: 65%; // left:138px;
      left: 18%;

      &.active {
        animation: r3ac 1s linear;
        -moz-animation: r3ac 1s linear;
        -webkit-animation: r3ac 1s linear;
      }
    }

    &.dice4 {

      
      top: 19%; // left:235px;
      left: 63%;

      &.active {
        animation: r4ac 1s linear;
        -moz-animation: r4ac 1s linear;
        -webkit-animation: r4ac 1s linear;
      }
    }

    &.dice5 {

      
      top: 6%; // left:120px;
      left: 32.2%;

      &.active {
        animation: r5ac 1s linear;
        -moz-animation: r5ac 1s linear;
        -webkit-animation: r5ac 1s linear;
      }
    }

    &.dice6 {

      
      top: 34%; // left:80px;
      left: 8%;

      &.active {
        animation: r6ac 1s linear;
        -moz-animation: r6ac 1s linear;
        -webkit-animation: r6ac 1s linear;
      }
    }
  }
}